$awardsBgRatio: 2860/1860;

section.awards {
  margin-bottom: 50px;

  .awards-content {
    width: 100%;
    background-image: image_url('innoawards/2016/awards-bg.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  .icon-logo {
    @include icon-logo(110px);
    transform: scale(1);
  }

  .container {
    height: 100%;
  }

  .awards-list {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100% * 1 / $awardsBgRatio;

    .item {
      position: absolute;

      &:hover {
        .award-desc {
          opacity: 1;
          visibility: visible;
          transform: translateX(0) translateY(0)!important;
          transition: all 0.3s;
        }

        .award-option {
          opacity: 0;
          visibility: hidden;
          transition: all 0.3s;
        }

        .icon-logo {
          transform: scale(0.5);
          transition: all 0.3s;
        }
      }
    }

    .award-option {
      display: flex;
      align-items: center;
      opacity: 1;
      visibility: visible;
      transition: all 0.3s;
    }

    .award-name {
      font-size: 1.4rem;
      color: #fff;
      padding-left: 10px;
      max-width: 100px;

      p {
        margin: 0;
      }
    }

    .award-desc {
      position: absolute;
      color: $color-gray;
      width: 320px;
      font-size: 14px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;

      .award-label,
      .icon-medal {
        font-size: 22px;
      }

      .icon-medal {
        margin-right: 5px;
      }

      p {
        margin: 0;
      }
    }

    .item:nth-child(1) {
      top: 21%;
      left: 8%;

      .award-desc {
        bottom: 10%;
        left: -50px;
        transform: translateX(-30px);
      }
    }

    .item:nth-child(2) {
      top: 4%;
      left: 28%;

      .award-desc {
        text-align: left;
        top: 10%;
        left: 20%;
        transform: translateX(30px);
      }
    }

    .item:nth-child(3) {
      top: 8%;
      left: 61%;

      .award-desc {
        top: 20%;
        left: 0;
        transform: translateX(30px);
      }
    }

    .item:nth-child(4) {
      top: 28%;
      left: 37%;

      .award-desc {
        top: 10%;
        right: -10%;
        transform: translateY(30px);
      }
    }

    .item:nth-child(5) {
      top: 28%;
      left: 73%;

      .award-desc {
        bottom: 10%;
        right: 0;
        transform: translateX(-30px);
      }
    }

    .item:nth-child(6) {
      top: 46%;
      left: 2%;

      .award-desc {
        bottom: 10%;
        transform: translateX(-30px);
      }
    }

    .item:nth-child(7) {
      top: 54%;
      left: 37%;

      .award-desc {
        top: 0;
        right: 0;
        transform: translateY(-30px);
      }
    }

    .item:nth-child(8) {
      top: 50%;
      left: 76%;

      .award-desc {
        top: 10%;
        right: 10%;
        transform: translateX(-30px);
      }

      .award-name {
        max-width: 80px;
      }
    }

    .item:nth-child(9) {
      top: 68%;
      left: 11%;

      .award-desc {
        bottom: -10%;
        right: 0;
        transform: translateY(30px);
      }
    }

    .item:nth-child(10) {
      top: 77%;
      left: 32%;

      .award-desc {
        bottom: 10%;
        left: 0;
        transform: translateX(30px);
      }
    }

    .item:nth-child(11) {
      top: 70%;
      left: 61%;

      .award-desc {
        top: 10%;
        left: 0;
        transform: translateX(30px);
      }

      .award-name {
        max-width: 122px;
      }
    }
  }
}


@media (max-width: 750px) {
  section.awards {
    .awards-content {
      background-image: image_url('innoawards/2016/awards-bg-mobile.png');
    }

    .awards-list {
      padding-bottom: 800px;

      .item {
        .award-option {
          flex-direction: column;
        }

        .icon-logo {
          @include icon-logo(80px);
        }

        .award-name {
          font-size: 1rem;
          padding-left: 0;
          align-self: flex-start;
          max-width: 80px;
        }

        .award-desc {
          display: none;
        }

        &:hover {
          .award-option {
            opacity: 1;
            visibility: visible;
            transition: all 0.3s;
          }

          .icon-logo {
            transform: scale(1);
            transition: all 0.3s;
          }
        }
      }

      .item:nth-child(7) {
        top: 50%;
      }

      .item:nth-child(9) {
        left: 9%;
      }

      .item:nth-child(10) {
        top: 80%;
      }
    }
  }
}
